<template>
  <div class="main">
    <div class="main-title">出库详情</div>
    <div class="main-content">
      <el-row>
        <el-col :span="16">
          <el-form label-width="120px">
            <el-form-item label="出库单编号：">
              {{exportInfo.outstockNum}}
            </el-form-item>
            <el-form-item label="出库类型：">
              <el-select placeholder="请选择出库类型" v-model="exportInfo.outstockType" disabled>
                <el-option v-for="(item, index) in outstockTypes.TypeArray" :key="index" :value="item.KeyId - 0" :label="item.Value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建人：">
              {{exportInfo.creator}}
            </el-form-item>
            <el-form-item label="创建时间：">
              {{exportInfo.createTime}}
            </el-form-item>
            <el-form-item label="备注：">
              {{exportInfo.remark}}
            </el-form-item>
            <el-form-item label="出库商品列表：">
              <div class="instock-box">
                <div class="hd">
                  <div class="name">商品名称</div>
                  <div class="spu">SPU</div>
                  <div class="unit">规格</div>
                  <div class="sku">SKU</div>
                  <div class="stock">剩余库存</div>
                  <div class="num">出库数量</div>
                </div>
                <div class="bd">
                  <!-- 商品 -->
                  <div class="item" v-for="(good, gi) in exportInfo.commodity" :key="gi">
                    <div class="name"><span class="center">{{good.commodityName}}</span></div>
                    <div class="spu"><span class="center">{{good.commodityNo}}</span></div>
                    <!-- 规格 -->
                    <div class="attr-box">
                      <div class="attr" v-for="(attr, ai) in good.sellAttributesList" :key="ai">
                        <div class="unit">{{attr.attributeName}}</div>
                        <div class="sku">{{attr.sku}}</div>
                        <div class="stock">{{attr.stockNum}}</div>
                        <div class="num">{{attr.outstockNum}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="default" @click="goback">返回</el-button>
            </el-form-item>
          </el-form>
          <ul class="operation">
            <li>
              1、{{exportInfo.createTime}} {{exportInfo.creator}}创建
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { outstockTypes } from '@/data/enum'
export default {
  data () {
    return {
      outstockTypes,
      outRecordId: this.$route.query.outRecordId || '',
      exportInfo: {},
      operateHistory: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    // 获取出库单详情
    getData () {
      this.$loading()
      this.$http.post(this.$api + '/stock/getOutRecordDetail', {
        outRecordId: this.outRecordId || ''
      }).then(res => {
        if (res.responseCode === '0000') {
          this.exportInfo = res.data
        } else {
          this.$message.error({
            duration: this.$store.state.duration,
            message: res.responseMsg
          })
        }
      }).catch(err => {
        console.error(err)
      })
      this.$loading().close()
    },
    // 返回
    goback () {
      this.$router.push({
        path: '/stock/exportStock',
        query: {
          pg: this.$route.query.pg || '',
          size: this.$route.query.size || ''
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.instock-box {
  width: 871px;
  text-align: center;
  .name,
  .spu,
  .sku {
    width: 180px;
  }
  .num {
    width: 150px;
  }
  .unit,
  .stock,
  .operate {
    width: 90px;
  }
  .hd {
    height: 45px;
    line-height: 45px;
    background: #f8fcff;
    border-top: solid 1px #ebeef5;
    border-left: solid 1px #ebeef5;
    & > div {
      float: left;
      border-right: solid 1px #ebeef5;
    }
  }
  .bd {
    max-height: 400px;
    overflow: auto;
    background: #ffffff;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    .item {
      display: flex;
      justify-content: space-between;
      align-content: stretch;
      div {
        border-right: 1px solid #ebeef5;
        border-bottom: 1px solid #ebeef5;
      }
      .operate {
        position: relative;
        width: 90px;
      }
      .name,
      .spu {
        position: relative;
        width: 180px;
      }
      .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 160px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .attr-box {
        border: 0;
        .attr {
          display: flex;
          border: 0;
        }
        .counter {
          border: 0;
          width: 140px;
        }
      }
    }
  }
}
.operation {
  list-style: none;
  padding: 30px;
  font-size: 14px;
  color: #666;
  border-top: solid 1px #e5e5e5;
}
</style>
